import { Component } from 'react'
import ReactDOM from 'react-dom'

class Son1 extends Component {
  render() {
    const { mother, sonWife } = this.props
    return (
      <div>
        <h3>我是大儿子组件</h3>
        <div>妈妈：{mother}</div>
        <div>弟媳：{sonWife}</div>
      </div>
    )
  }
}

class Son2 extends Component {
  //   两种做法 第一中直接在onChange事件里 子传父 然后 input value 值接收的是父传子
  // 2. 第二种方法 是如下代码 直接在组件里定义state 修改state 和 调用父传子的方法 在setState((),()) 内完成
  // 因为setState 在react 中是异步的方法  原生的是同步的方法 或者使用async 和await 也可以解决
  state = {
    wife: '',
  }
  render() {
    const { mother, send } = this.props
    return (
      <div>
        <h3>我是小儿子组件</h3>
        <div>妈妈：{mother}</div>
        <div>
          配偶：
          <input
            type="text"
            value={this.state.wife}
            onChange={(e) => {
              this.setState({ wife: e.target.value }, () =>
                send(this.state.wife)
              )
            }}
          />
        </div>
      </div>
    )
  }
}

class App extends Component {
  // 提供了共享的状态以及修改状态的方法
  state = {
    msg: '',
    sonWife: '',
  }
  changeMsg = (e) => {
    this.setState({
      msg: e.target.value,
    })
  }
  render() {
    const { msg, sonWife } = this.state
    return (
      <div>
        <h1>父组件</h1>
        <div>
          配偶：
          <input type="text" value={msg} onChange={this.changeMsg} />
        </div>
        <div>儿媳妇：{sonWife}</div>
        <Son1 mother={msg} sonWife={sonWife}></Son1>
        <Son2 mother={msg} send={(e) => this.setState({ sonWife: e })}></Son2>
      </div>
    )
  }
}

ReactDOM.render(<App></App>, document.getElementById('root'))
